<template>
  <div class="rotate-earth">
    <div id="earth"></div>
  </div>
</template>

<script lang="ts" name="rotatingEarth" setup>
  import 'echarts-gl';
  import { onMounted } from "vue";
  import * as echarts from 'echarts';

  // 引入静态资源
  const pisa = new URL('@/assets/img/earth/pisa.hdr', import.meta.url).href;
  const earthImg = new URL('@/assets/img/earth/earth.jpg', import.meta.url).href;
  const worldImg = new URL('@/assets/img/earth/world.jpg', import.meta.url).href;
  const backgroundImg = new URL('@/assets/img/earth/background.jpeg', import.meta.url).href;

  // 设立图表dom
  let chartObj: any = null;
  let earthDom: HTMLElement | null = null;

  // 渲染图表
  const renderChart = () => {
    earthDom = document.getElementById("earth");
    chartObj = echarts.init(earthDom);
    chartObj.setOption({
      globe: {
        // 基础贴图
        baseTexture: earthImg,
        // 高亮贴图
        heightTexture: worldImg,
        // 环境贴图
        environment: backgroundImg,
        // 值越大，地球顶点的位置就越高，山脉等凹凸状态就越明显, 地球的立体形越强
        displacementScale: 0.04,
        // realistic： 真实感(推荐)
        shading: 'realistic',
        // 跟shading配置成套
        realisticMaterial: {
          roughness: 0.9
        },
        // 开启外界光源
        postEffect: {
          enable: true
        },
        // 光源
        light: {
          main: {
            intensity: 5,
            shadow: true
          },
          ambientCubemap: {
            texture: pisa,
            diffuseIntensity: 0.2
          }
        }
      }
    });
  };

  onMounted(() => {
    renderChart();
  });
</script>

<style lang="less" scoped>
  #earth {
    width: 100vw;
    height: 100vh;
  }
</style>